<!--福利秒杀价-->
<template>
    <div class="welfare" v-for="(shop, index) in shoplists" :key="index">
        <div class="welfare-card">
            <div class="card-img">
                <img :src="shop.url" />
            </div>
            <div class="card-content">
                <div class="title-tag">
                    <div class="title">{{ truncateText(shop.title, 12) }}</div>
                    <div class="tag">{{ shop.tag }}</div>
                </div>
                <div class="price">
                    <span style="font-size: 14px;">￥</span>
                    <span style="font-size: 18px;">{{ pointBefore(shop.price) }}.</span>
                    <span style="font-size: 13px;">{{ pointAfter(shop.price) }}</span>
                </div>
                <div class="cut-price">
                    <span class="sec">秒杀价</span>
                    <span class="cut">已降{{ shop.catPrice }}元</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { truncateText, pointBefore, pointAfter } from '@/components/util/tools.js';

const shoplists = ref([
    {
        url: '/src/assets/images/blue.jpg',
        title: 'XX卫星 智能智慧 创新不凡 原装',
        tag: 'APP智联|卫星|遥控',
        price: 9999.90,
        catPrice: 300.00
    },{
        url: '/src/assets/images/blue.jpg',
        title: 'XX卫星 智能智慧 创新不凡 原装',
        tag: 'APP智联|卫星|遥控',
        price: 9999.90,
        catPrice: 300.00
    },{
        url: '/src/assets/images/blue.jpg',
        title: 'XX卫星 智能智慧 创新不凡 原装',
        tag: 'APP智联|卫星|遥控',
        price: 9999.90,
        catPrice: 300.00
    },{
        url: '/src/assets/images/blue.jpg',
        title: 'XX卫星 智能智慧 创新不凡 原装',
        tag: 'APP智联|卫星|遥控',
        price: 9999.90,
        catPrice: 300.00
    },{
        url: '/src/assets/images/blue.jpg',
        title: 'XX卫星 智能智慧 创新不凡 原装',
        tag: 'APP智联|卫星|遥控',
        price: 9999.90,
        catPrice: 300.00
    },{
        url: '/src/assets/images/blue.jpg',
        title: 'XX卫星 智能智慧 创新不凡 原装',
        tag: 'APP智联|卫星|遥控',
        price: 9999.90,
        catPrice: 300.00
    },{
        url: '/src/assets/images/blue.jpg',
        title: 'XX卫星 智能智慧 创新不凡 原装',
        tag: 'APP智联|卫星|遥控',
        price: 9999.90,
        catPrice: 300.00
    },{
        url: '/src/assets/images/blue.jpg',
        title: 'XX卫星 智能智慧 创新不凡 原装',
        tag: 'APP智联|卫星|遥控',
        price: 9999.90,
        catPrice: 300.00
    },{
        url: '/src/assets/images/blue.jpg',
        title: 'XX卫星 智能智慧 创新不凡 原装',
        tag: 'APP智联|卫星|遥控',
        price: 9999.90,
        catPrice: 300.00
    }
]);
</script>

<style scoped>
.welfare {
    width: 95%;
    
    background-color: #fff;
    border-radius: 10px;
    margin: auto;
    margin: 10px 10px;
    
}
.welfare .welfare-card {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 18vh; /* 可根据需要调整 */
    
}
.welfare-card .card-img {
    width: 40%;
    height: 90%;
    padding: 5px;
}
.card-img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.welfare-card .card-content {
    width: 60%;
    float: left;
    padding: 5px;

}
.card-content .title {
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}
.card-content .tag {
    font-size: 12px;
    color: #cccccc;
    text-align: left;
}
.card-content .price {
    height: 35px;
    width: 100%;
    padding-top: 10px;
    text-align: left;
}
.price span {
    color: red;
    font-weight: bold;
    text-align: left;
    margin: auto;
}

.card-content .cut-price {
    text-align: left;
}
.cut-price .sec {
    background-color: red;
    font-size: 14px;
    color: white;
    border-radius: 5px 0px 0px 5px;
    padding: 0px 2px;
    border: 1px solid red;
}
.cut-price .cut {
    border: 1px solid red;
    color: red;
    font-size: 14px;
    padding: 0px 2px;
    border-radius: 0px 5px 5px 0px;
}
</style>